import React, { Component } from 'react'
import axios from "axios";

// 对比之前的 Cinema 组件，用这种受控组件的写法节约了一定的内存，不需要额外备份一次了
export default class Cinema extends Component {

    constructor() {
        super()
        this.state = {
            cinemaList: [],
            myText: ''
        }

        // 使用 axios(第三方库，专门用于请求数据) 请求数据
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=4853853',
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16735736022244038807781377","bc":"110100"}',

                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log('请求结果:', res.data.data.cinemas);
            this.setState({
                cinemaList: res.data.data.cinemas,
                bakCinemaList: res.data.data.cinemas,
            })
        }).catch(err => {
            console.log(err);
        })
    }

    // 后面讲的生命周期函数 更适合发送 ajax请求
    render() {
        return (
            <div>
                {/* 改造成受控组件 */}
                <input value={this.state.myText} onChange={(evt) => {
                    this.setState({
                        myText: evt.target.value
                    })
                }} />
                {this.getCinemaList().map(item => (
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>
                ))}
            </div>
        )
    }

    // 筛选出包含输入框的列表内容
    getCinemaList = () => {
        return this.state.cinemaList.filter(item => item.name.toUpperCase().includes(this.state.myText.toUpperCase()) || item.address.toUpperCase().includes(this.state.myText.toUpperCase()))
    }
}


/**
 * 数组的filter方法
 */
// 返回数组中包含字符串a的项，得到一个新的数组
// let arr = ['aaa', 'abc', 'bcc']
// let newArr = arr.filter(item => item.includes('a'))
// console.log(newArr);